import { getSorter, useRequestHandle } from '@/utils/utils';
import {
    PlusOutlined,
} from '@ant-design/icons';
import { ProDescriptions } from '@ant-design/pro-components';
import {
    Button,
    Drawer,
    message,
    Space
} from 'antd';
import { useRef, useState } from 'react';
import { Access, useAccess, history } from 'umi';
import SaveForm from './components/SaveForm';
import operation from './operation';
import { addOrUpdate, query } from './service';
import ProMaxTable from '@/components/ProMaxTable';
const X = () => {
    const [saveFormVisible, setSaveFormVisible] = useState(false);
    const [updateFormValues, setUpdateFormValues] = useState({});
    const actionRef = useRef();
    const [row, setRow] = useState();
    const { canOperation, canShowOption } = useAccess();
    // 是否显示操作列
    const isShowOptionColumn = canShowOption([
        operation.update,
        operation.delete,
        operation.assignPermissions,
    ]);

    // 刷新
    const reload = () => {
        if (actionRef.current) {
            actionRef.current.reload();
        }
    };

    // 新增/修改
    const addOrUpdateRequest = useRequestHandle(addOrUpdate, () => {
        message.success('创建成功.');
        setSaveFormVisible(false);
        reload();
    });





    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            valueType: 'indexBorder',
            fixed: 'left',
            width: 75,
        },
        {
            title: '服务名称',
            dataIndex: 'serverName',
            ellipsis: true,
            render: (dom, entity) => <a onClick={() => setRow(entity)}>{dom}</a>,
            fixed: 'left',
            width: 170,
        },
        {
            title: '服务根目录',
            dataIndex: 'rootPath',
            ellipsis: true,
        },
        {
            title: '备注',
            dataIndex: 'remark',
            ellipsis: true,

        },

        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            fixed: 'right',
            hideInTable: !isShowOptionColumn,
            width: 135,
            render: (_, record) => (
                <Space>
                    <Access accessible={canOperation(operation.update)}>
                        <Button
                            type="primary"
                            size="small"
                            onClick={async () => {

                                setSaveFormVisible(true);
                                setUpdateFormValues(record);
                            }}
                        >
                            编辑
                        </Button>
                    </Access>
                    <Button
                        type="primary"
                        size="small"
                        onClick={async () => {
                            history.push(`/system/developer/applications/publish/${record.id}`)
                        }}
                    >
                        发布
                    </Button>
                </Space>
            ),
        },
    ];
    return (
        <>

            <ProMaxTable
                headerTitle={"版本发布"}
                actionRef={actionRef}
                cardProps={{
                    style: { height: "auto" }
                }}
                rowKey="id"
                search={false}
                options={{
                    search: canOperation(operation.query)
                        ? {
                            placeholder: '请输入关键字',
                        }
                        : false,
                    fullScreen: true,
                }}
                toolBarRender={() => [
                    <Access key="create" accessible={canOperation(operation.create)}>
                        <Button type="primary" onClick={() => {

                            setSaveFormVisible(true)

                        }}>
                            <PlusOutlined /> 创建
                        </Button>
                    </Access>,

                ]}
                request={async (params, sorter, filter) => {
                    const data = params;
                    data.pageIndex = params.current;
                    const result = await query({ ...data, ...getSorter(sorter), filter });
                    if (result.success) {
                        return {
                            ...result,
                            total: result.data.totalItems,
                        };
                    }
                    return [];
                }}
                postData={(data) => {
                    return !data ? [] : data.items;
                }}
                // scroll={{
                //   x: 1200,
                // }}
                columns={columns}
                rowSelection={false}
                expandable={{ defaultExpandAllRows: true }}
            />

            <SaveForm
                onSubmit={async (value) => {
                    const params = { ...value }
                    addOrUpdateRequest.run(params);
                }}
                onCancel={() => {
                    setSaveFormVisible(false);
                    setUpdateFormValues({});
                }}
                loading={addOrUpdateRequest.loading}
                modalVisible={saveFormVisible}
                record={updateFormValues}
            />

            <Drawer
                width={600}
                open={!!row}
                onClose={() => {
                    setRow(undefined);
                }}
                closable={false}
            >
                {row?.id && (
                    <ProDescriptions
                        column={2}
                        title={row?.realName}
                        request={async () => ({
                            data: row || {},
                        })}
                        params={{
                            id: row?.id,
                        }}
                        columns={columns}
                    />
                )}
            </Drawer>


        </>
    );
};

export default X;
